<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  }
})
</script>
<template>
  <div class="cardItemBox">
    <h3 class="title">
      <svg-icon color="#0b7be2" className="iconBox" :iconName="icon"></svg-icon
      ><span>{{ title }}</span>
    </h3>
    <p class="content">
      {{ content }}
    </p>
  </div>
</template>
<style scoped lang="less">
.cardItemBox {
  text-align: center;
  border-radius: 0.25rem;
  background-color: #eff4f8;
  padding: 0.625rem 0;

  h3 {
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 0.625rem;

    .iconBox {
      vertical-align: middle;
    }

    span {
      display: inline-block;
      margin-left: 0.5rem;
      font-weight: 600;
      font-size: 1rem;
    }
  }

  .content {
    text-align: left;
    font-size: 0.875rem;
    height: 3rem;
    line-height: 1rem;
    padding: 0 0.375rem;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: clamp(0, 3, 3);
  }
}
</style>
